<template>
  <div class="main">
    <el-upload ref="upload" class="upload-file" action="" multiple :on-remove="
      params =>
        handleRemove(
          params
        )
    " :http-request="
  params =>
    handleFile(
      params
    )
" :before-upload="beforeUpload" :on-change="params => handleChangeFile()" :file-list="oldFileArr"
      accept=".png,.jpg,.jpeg,.doc,.docx,.pdf,.txt,.excel,.mp4">
      <el-button type="text" :disabled="canInput" class="add-many"><i class="el-icon-plus"></i></el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    canInput: {
      type: Boolean,
      required: true
    },
    imgUrlList: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      uploadNum: 0,
      uploadSize: 0,
      uploadFileList: [],
      oldFileArr: []
    };
  },
  watch: {
    imgUrlList (val) {
    }
  },
  mounted () {
  },
  methods: {
    // 上传图片大小不能超过
    beforeUpload (file) {
      const isLtSize = this.uploadSize / 1024 / 1024 < 100;
      if (!isLtSize) {
        this.$message.error("单次上传文件大小总和不能超过 100MB!");
        return false;
      }
      return true;
    },
    // 获取上传文件的数量
    handleChangeFile () {
      var upload_img = document.getElementsByClassName("upload-file");
      if (upload_img && upload_img.length > 0) {
        var upload = upload_img[0].getElementsByTagName("input");
        if (
          upload &&
          upload.length > 0 &&
          upload[0].files &&
          upload[0].files.length > 0
        ) {
          this.uploadNum = upload[0].files.length;
          this.uploadSize = 0;
          upload[0].files.forEach(kit => {
            this.uploadSize = this.uploadSize + kit.size;
          });
        }
      }
    },
    handleRemove (file) {
      var index = this.uploadFileList.findIndex(a => a.uid === file.file.uid)
      if (index !== -1) {
        this.uploadFileList.splice(index, 1);
      }
      this.getFiles()
    },
    // 上传文件
    handleFile (file) {
      console.log(file)
      this.uploadFileList.push(file.file);
      if (
        this.uploadNum === this.uploadFileList.length &&
        this.uploadNum !== 0 &&
        this.uploadFileList.length !== 0
      ) {
        let myData = new FormData();
        this.uploadFileList.forEach(kit => {
          myData.append("files", kit);
        });
        this.uploadNum = 0;
        this.getFiles()
      }
    },
    getFiles () {
      let myData = new FormData();
      this.uploadFileList.forEach(kit => {
        myData.append("files", kit);
      });
      console.log(myData)
      console.log(this.uploadFileList)
      this.$emit('gaveFiles', this.uploadFileList)
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
}

.add-many {
  border: 1px solid #6ecae3;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: transparent;
  line-height: 40px;
  border-radius: 4px;
  color: rgb(161, 154, 154);
  font-weight: 600;

  i {
    font-size: 40px;
  }
}
</style>
